{% extends 'plapp/base.html' %}

{% load pleft_tags %}
{% load i18n %}

{% block scripts %}
  {% insert_script 'form' %}
{% endblock %}

{% block main_script %}
  {%form.media%}
{% endblock %}

{% block styles %}
  <link rel="stylesheet" href='/static/style/form.css'>
{% endblock %}

{% block pageid %}home{% endblock %}

{% block title %}
  <h1>{% trans "Plan an appointment" %}</h1>
{% endblock %}

{% block content %}

<div class="side-help">
  <p id="presentation-button-p"><a id="presentation-button"><img src='/static/images/presentation-thumb.jpg' alt='{% trans "Watch our presentation!" %}'></a>
  <p>{% blocktrans with settings.SITE_NAME as name %}{{ name }} helps you to find the right date and time for your appointments.{% endblocktrans %} {% blocktrans with settings.SITE_NAME as name %}Propose a few dates and let the invitees tell {{ name }} when they’re available.{% endblocktrans %}
  <br><br>
  <p>{% trans "The invitees will receive an email that looks like this:" %}
  <p><a id="mail-preview" class="preview"><img src='/static/images/preview-mail-small.png'></a>
  <p>{% trans "Both you and the invitees will then get a nice overview:" %}
  <p><a id="overview-preview" class="preview"><img src='/static/images/preview-overview-small.png'></a>
</div>

<div class="appointment">
  <h2>{% trans "Appointment" %}</h2>
  
  <form id="create" method="POST">
  {%for field in form%}
     <div class="field">
        <dl>
          <dt>{{field.label_tag}}</dt>
          <dd>{{field}}</dd>
          <dd class="errors">{{field.errors}}</dd>
          <dd class="help">{{field.help_text}}</dd>
       </dl>
     </div>
  {%endfor%}
  <div id="button-block" class="field">
    <button type="submit" id="button" />
  </div>
  </form>
</div>

<div id="status"></div>
{% endblock %}
